<template>
  <div class="toolsbar-wrap">
    <div class="tools-item-wrap">
      <div class="tools-item cart primary-hover">
        <nuxt-link to="/order/shoppingCart" target="_blank">
          <el-badge :value="this.num" class="item">
            <span class="icon"></span>
          </el-badge>
          <span class="text">购物车</span>
        </nuxt-link>
      </div>
      <div class="tools-item kefu primary-hover">
        <a
          :href="`http://wpa.qq.com/msgrd?v=3&uin=${$store.state.setting.QQ}&site=qq&menu=yes`"
          target="_blank"
        >
          <span class="icon"></span>
          <span class="text">客服</span>
        </a>
      </div>
      <el-popover placement="left" trigger="hover">
        <img style="width: 128px;height: 128px;" :src="$store.state.setting.WeChatQrUrl" alt="">
        <div slot="reference" class="tools-item wechat primary-hover">
          <span class="icon"></span>
          <span class="text">微信</span>
        </div>
      </el-popover>
      <el-popover placement="left" trigger="hover">
        <div class="tel-detail">
          <div>
            <p>咨询热线：{{$store.state.setting.Tel400}}</p>
          </div>
          <div>
            <p>在线时间：周一至周五</p>
            <p style="text-align: center;">{{$store.state.setting.BizQQOnTime}}-{{$store.state.setting.BizQQOffTime}}</p>
          </div>
        </div>
        <div slot="reference" class="tools-item telphone primary-hover">
          <span class="icon"></span>
          <span class="text">电话</span>
        </div>
      </el-popover>
      <div class="tools-item gotop primary-hover" ref="btn" @click="handleTop">
        <span class="icon"></span>
        <span class="text">回顶部</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
      info: null
    };
  },
  methods: {
    handleTop() {
      this.timer = setInterval(() => {
        let osTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        let ispeed = Math.floor(-osTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          osTop + ispeed;
        this.isTop = true;
        if (osTop === 0) {
          clearInterval(this.timer);
        }
      }, 30);
    },
    scrollToTop() {
      let obtn = this.$refs.btn;
      let osTop = document.documentElement.scrollTop || document.body.scrollTop;
      if (osTop >= 250) {
        obtn.style.display = "block";
      } else {
        obtn.style.display = "none";
      }
      if (!this.isTop) {
        clearInterval(this.timer);
      }
      this.isTop = false;
    }
  },
  mounted() {
    this.num = this.$getCart().length;
    window.addEventListener("scroll", this.scrollToTop);
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollToTop);
  }
};
</script>

<style lang="less" scoped>
.toolsbar-wrap {
  position: fixed;
  right: 25px;
  bottom: 160px;
  height: 285px;
  z-index: 999;
  .tools-item-wrap {
    background: rgba(244, 244, 244, 1);
    box-shadow: 0px 0px 9px 0px rgba(108, 108, 108, 0.18);
  }
  .tools-item {
    position: relative;
    width: 50px;
    height: 58px;
    background: rgba(255, 255, 255, 1);
    cursor: pointer;
    color: rgba(153, 153, 153, 1);
    a {
      color: rgba(153, 153, 153, 1);
    }
    &:hover {
      a {
        color: rgba(255, 255, 255, 1);
      }
    }
    .item {
      display: block;
    }
    .text {
      display: inline-block;
      width: 50px;
      text-align: center;
      font-size: 12px;
    }
    .icon {
      width: 50px;
      height: 36px;
      display: block;
      background-repeat: no-repeat;
      background-position: center center;
    }
  }
  .cart {
    border-radius: 5px 5px 0 0;
  }
  .gotop {
    border-radius: 0 0 5px 5px;
    background: rgba(244, 244, 244, 1);
  }
  .telphone {
    position: relative;
    .tel-detail {
      display: none;
      position: absolute;
      top: -20px;
      right: 50px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 0px 9px 0px rgba(108, 108, 108, 0.18);
      border-radius: 5px;
      width: 157px;
      font-size: 14px;
      padding: 15px 25px 11px 17px;
      line-height: 18px;
      color: rgba(153, 153, 153, 1);
      p:first-child {
        color: rgba(51, 51, 51, 1);
        margin-bottom: 5px;
      }
    }
  }
  .wechat {
    position: relative;
    .wechat-wrap {
      // display: none;
      position: absolute;
      top: -20px;
      right: 50px;
      background-repeat: no-repeat;
      background-size: 100%;
      width: 128px;
      height: 128px;
    }
  }
  .cart .icon {
    background-image: url(/img/home/float/fb_shop_black.png);
  }
  .cart:hover .icon {
    background-image: url(/img/home/float/fb_shop_white.png);
  }
  .kefu .icon {
    background-image: url(/img/home/float/fb_kefu_black.png);
  }
  .kefu:hover .icon {
    background-image: url(/img/home/float/fb_kefu_white.png);
  }
  .wechat .icon {
    background-image: url(/img/home/wechat.png);
    background-repeat: no-repeat;
    background-size: 50%;
  }
  .wechat:hover .wechat-wrap {
    display: block;
  }
  .telphone .icon {
    background-image: url(/img/home/float/fb_telphone_black.png);
  }
  .telphone:hover .icon {
    background-image: url(/img/home/float/fb_telphone_white.png);
  }
  .telphone:hover .tel-detail {
    display: block;
  }
  .gotop .icon {
    background-image: url(/img/home/float/fb_return_black.png);
  }
  .gotop:hover .icon {
    background-image: url(/img/home/float/fb_return_white.png);
  }
}
</style>
